<!-- 弹幕 -->
<template>
  <view class="cheer" :style="'background-color:' + bgColor">
    <view class="container">
      <view class="title">
        <text>{{ title }}</text>
      </view>
      <view class="content">
        <view
          v-if="teamAData.closed || teamAData.stop === 2 || teamAData.pause === 2 || teamAData.frozen === 2"
          class="cheerBtn btnA"
          :class="{
            stop: teamAData.closed || teamAData.stop === 2 || teamAData.pause === 2 || teamAData.frozen === 2
          }"
        >
          <text class="teamText">{{ teamAName }}</text>
          <view v-if="oddIds.includes(teamAData.odd.odd_id)" class="supportA"><text class="supported">已投</text></view>
        </view>
        <view v-else @click="$emit('event-change', teamAData)" class="cheerBtn btnA">
          <text class="teamText">{{ teamAName }}</text>
          <view v-if="oddIds.includes(teamAData.odd.odd_id)" class="supportA"><text class="supported">已投</text></view>
        </view>

        <view class="cheer-score">{{ teamAScore }}:{{ teamBScore }}</view>

        <view
          v-if="teamBData.closed || teamBData.stop === 2 || teamBData.pause === 2 || teamBData.frozen === 2"
          class="cheerBtn btnB"
          :class="{
            stop: teamBData.closed || teamBData.stop === 2 || teamBData.pause === 2 || teamBData.frozen === 2
          }"
        >
          <text class="teamText">{{ teamBName }}</text>
          <view v-if="oddIds.includes(teamBData.odd.odd_id)" class="supportB"><text class="supported">已投</text></view>
        </view>
        <view v-else @click="$emit('event-change', teamBData)" class="cheerBtn btnB">
          <text class="teamText">{{ teamBName }}</text>
          <view v-if="oddIds.includes(teamBData.odd.odd_id)" class="supportB"><text class="supported">已投</text></view>
        </view>
      </view>
      <navigator :url="moreUrl" class="more" v-if="moreUrl"><text class="moreText">更多玩法</text></navigator>
    </view>
  </view>
</template>

<script>
export default {
  name: "cheer",
  props: {
    bgColor: {
      type: String,
      default: "#FFFFFF"
    },
    title: {
      type: String,
      default: "有奖助威"
    },
    oddIds: Array,
    moreUrl: String,
    teamAScore: [String, Number],
    teamBScore: [String, Number],
    teamAName: String,
    teamAData: [String, Number, Boolean, Array, Object, Date],
    teamBName: String,
    teamBData: [String, Number, Boolean, Array, Object, Date]
  }
};
</script>
<style lang="scss" scoped>
.cheer {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  height: 80upx;
  position: relative;
}
.container {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 700upx;
}

.title {
  text-align: center;
  font-size: 24upx;
  line-height: 40upx;
  width: 120upx;
  color: #999999;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cheerBtn {
  /* #ifndef APP-PLUS-NVUE */
  min-width: 160upx;
  /* #endif */
  border-radius: 2500upx;
  color: #ffffff;
  line-height: 60upx;
  height: 60upx;
  margin: 0 10upx;
  padding: 0 20upx;
  text-align: center;
  position: relative;
  &.stop {
    background: url("~@/static/images/video/ban.png");
    background-size: 100%;
    background-color: #9aa2af;
  }
}

.cheerBtn:active:not(.stop) {
  transform: scale(1.1);
}

.supportA,
.supportB {
  position: absolute;
  top: 0;
  line-height: 30upx;
  border-radius: 30upx;
  padding: 0 10upx;
  background-image: linear-gradient(to right, #b531ff, #f646ff);
}
.supportA {
  left: -25upx;
  transform: rotate(-50deg);
}
.supportB {
  right: -30upx;
  transform: rotate(50deg);
}
.supported {
  font-size: 20upx;
}

.btnA {
  background-color: #6db7ed;
}
.btnB {
  background-color: #fb7299;
}
.teamText {
  font-size: 24upx;
}
.more {
  width: 120upx;
  text-align: center;
}
.moreText {
  color: #fb7299;
  font-size: 24upx;
  text-decoration: underline;
}
</style>
